<template>
    <div id="task-record-container">
        <div class="task-record-dete-select">
            <DatePicker @on-change="changeDate" type="daterange" :value="date" placement="bottom-end" placeholder="选择日期" style="width: 200px"></DatePicker>
        </div>
        <Divider style="margin-bottom: 50px">我的完成情况</Divider>
        <Record_Circle class="task_record_circle" v-for="(item, index) in circle_list" :key="`circle-${index}`" :item="item" />
        <Record_List />
    </div>
</template>

<script>

import task_request from "@/axios/task";
import date_js from "@script/date"
import Record_Circle from "@task/vue/record-circle";
import Record_List from "@task/vue/record-list";

export default {
    data() {
        return {
            circle_list: [
                {
                    percent: 0, 
                    total: 0, 
                    finish: 0, 
                    describe: '已完成'
                },
                {
                    percent: 0, 
                    total: 0, 
                    finish: 0, 
                    describe: '未完成'
                },
                {
                    percent: 0, 
                    total: 0, 
                    finish: 0, 
                    describe: '待完成'
                }
            ],
            date: []
        }
    },
    mounted() {
        this.date.push(`${date_js.getYear()}-${date_js.getMonth()}-01`);
        this.date.push(date_js.getDate("-"))
        this.getTaskStatus();
    },
    methods: {
        async getTaskStatus() {
            let result = await task_request.taskStatistics(this.$store.state.user.sid, this.date[0], this.date[1]);
            this.circle_list[0].total = result.total;
            this.circle_list[0].finish = result.finished;
            this.circle_list[0].percent = result.total == 0 ? 100 : (result.finished / result.total * 100);
            this.circle_list[1].total = result.total;
            this.circle_list[1].finish = result.unfinish;
            this.circle_list[1].percent = result.total == 0 ? 100 : (result.unfinish / result.total * 100);
            this.circle_list[2].total = result.total;
            this.circle_list[2].finish = result.prefinish;
            this.circle_list[2].percent = result.total == 0 ? 100 : (result.prefinish / result.total * 100);
        },
        changeDate(v) {
            this.date = v;
            this.getTaskStatus();
        }
    },
    components: {
        Record_Circle,
        Record_List
    }
}
</script>

<style lang="scss">
@import "@task/scss/record-index.scss";
</style>